import classNames from 'classnames'
import { useDragWindow, useWindow } from '@renderer/hooks'
import styles from './styles.module.css'

interface IProps {
  className: string;
}

export function SettingHeader ({ className }: IProps) {
  const {
    isMaximized,
    maximize,
    minimize,
    close,
  } = useWindow()
  const { startDragWindow } = useDragWindow('manager')

  return (
    <div
      className={classNames(styles.container, {
        [className]: Boolean(className),
      })}
    >
      <div
        className='flex-1 h-full'
        onDoubleClick={maximize}
        onMouseDown={startDragWindow}
      ></div>
      <div className="flex items-center justify-center">
        <span
          className={styles.windowOperate}
          onClick={minimize}
        >
          🗕
        </span>
        <span
          className={styles.windowOperate}
          onClick={maximize}
        >
          {
            isMaximized
              ? '🗗'
              : '🗖'
          }
        </span>
        <span
          className={classNames(styles.windowOperate, styles.closeBtn)}
          onClick={close}
        >
          ✕
        </span>
      </div>
    </div>
  )
}
